WebCodecs VideoFrame-plan: En djupdykning i åtkomst till videobilddata

WebCodecs representerar ett paradigmskifte inom webbaserad mediebearbetning. Det ger lågnivååtkomst till medias byggstenar, vilket gör det möjligt för utvecklare att skapa sofistikerade applikationer direkt i webbläsaren. En av de mest kraftfulla funktionerna i WebCodecs är VideoFrame-objektet, och inom det, VideoFrame-planen som exponerar den råa pixeldatan från videobilder. Denna artikel ger en omfattande guide för att förstå och använda VideoFrame-plan för avancerad videomanipulation.

Förstå VideoFrame-objektet

Innan vi dyker ner i planen, låt oss rekapitulera VideoFrame-objektet självt. Ett VideoFrame representerar en enskild bildruta i en video. Det inkapslar avkodad (eller kodad) videodata, tillsammans med tillhörande metadata som tidsstämpel, varaktighet och formatinformation. VideoFrame API:et erbjuder metoder för:

• Läsa pixeldata: Det är här planen kommer in.
• Kopiera bildrutor: Skapa nya VideoFrame-objekt från befintliga.
• Stänga bildrutor: Frigöra de underliggande resurserna som bildrutan använder.

VideoFrame-objektet skapas under avkodningsprocessen, vanligtvis av en VideoDecoder, eller manuellt när man skapar en anpassad bildruta.

Vad är VideoFrame-plan?

En VideoFrames pixeldata är ofta organiserad i flera plan, särskilt i format som YUV. Varje plan representerar en annan komponent av bilden. Till exempel, i ett YUV420-format finns det tre plan:

• Y (Luma): Representerar bildens ljusstyrka (luminans). Detta plan innehåller gråskaleinformationen.
• U (Cb): Representerar den blå-skillnadskroma-komponenten.
• V (Cr): Representerar den röd-skillnadskroma-komponenten.

RGB-format, även om de verkar enklare, kan också använda flera plan i vissa fall. Antalet plan och deras betydelse beror helt på VideoPixelFormat för VideoFrame.

Fördelen med att använda plan är att det möjliggör effektiv åtkomst och manipulation av specifika färgkomponenter. Till exempel kanske du vill justera endast luminansen (Y-planet) utan att påverka färgen (U- och V-planen).

Åtkomst till VideoFrame-plan: API:et

VideoFrame API:et tillhandahåller följande metoder för att komma åt plandata:

• copyTo(destination, options): Kopierar innehållet i VideoFrame till en destination, som kan vara en annan VideoFrame, en CanvasImageBitmap, eller en ArrayBufferView. options-objektet styr vilka plan som kopieras och hur. Detta är den primära mekanismen för åtkomst till planen.

options-objektet i copyTo-metoden låter dig specificera layout och mål för videobilddatan. Viktiga egenskaper inkluderar:

• format: Det önskade pixelformatet för den kopierade datan. Detta kan vara detsamma som den ursprungliga VideoFrame eller ett annat format (t.ex. konvertering från YUV till RGB).
• codedWidth och codedHeight: Bredden och höjden på videobilden i pixlar.
• layout: En array av objekt som beskriver layouten för varje plan i minnet. Varje objekt i arrayen specificerar:
• offset: Förskjutningen, i bytes, från början av databufferten till starten av planens data.
• stride: Antalet bytes mellan starten på varje rad i planet. Detta är avgörande för att hantera utfyllnad (padding).

Låt oss titta på ett exempel där vi kopierar en YUV420 VideoFrame till en rå buffer:

async function copyYUV420ToBuffer(videoFrame, buffer) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;

  // YUV420 har 3 plan: Y, U och V
  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

  const layout = [
    { offset: 0, stride: width }, // Y-plan
    { offset: yPlaneSize, stride: width / 2 }, // U-plan
    { offset: yPlaneSize + uvPlaneSize, stride: width / 2 } // V-plan
  ];

  await videoFrame.copyTo(buffer, {
    format: 'I420',
    codedWidth: width,
    codedHeight: height,
    layout: layout
  });

  videoFrame.close(); // Viktigt att frigöra resurser
}

Förklaring:

• Vi beräknar storleken på varje plan baserat på width och height. Y har full upplösning, medan U och V är nedsamplade (4:2:0).
• layout-arrayen definierar minneslayouten. offset specificerar var varje plan börjar i bufferten, och stride specificerar antalet bytes man ska hoppa för att komma till nästa rad i det planet.
• Alternativet format är satt till 'I420', vilket är ett vanligt YUV420-format.
• Kritiskt är att efter kopieringen anropas videoFrame.close() för att frigöra resurser.

Pixelformat: En värld av möjligheter

Att förstå pixelformat är avgörande när man arbetar med VideoFrame-plan. VideoPixelFormat definierar hur färginformationen kodas inom videobilden. Här är några vanliga pixelformat du kan stöta på:

• I420 (YUV420p): Ett planärt YUV-format där Y-, U- och V-komponenterna lagras i separata plan. U och V är nedsamplade med en faktor 2 i både horisontell och vertikal dimension. Det är ett mycket vanligt och effektivt format.
• NV12 (YUV420sp): Ett semi-planärt YUV-format där Y lagras i ett plan, och U- och V-komponenterna är interfolierade i ett andra plan.
• RGBA: Röd, Grön, Blå och Alfa-komponenter lagras i ett enda plan, vanligtvis med 8 bitar per komponent (32 bitar per pixel). Ordningen på komponenterna kan variera (t.ex. BGRA).
• RGB565: Röd, Grön och Blå komponenter lagras i ett enda plan med 5 bitar för Röd, 6 bitar för Grön och 5 bitar för Blå (16 bitar per pixel).
• GRAYSCALE: Representerar gråskalebilder med ett enda luma-värde (ljusstyrka) för varje pixel.

Egenskapen VideoFrame.format talar om vilket pixelformat en given bildruta har. Se till att kontrollera denna egenskap innan du försöker komma åt planen. Du kan konsultera WebCodecs-specifikationen för en komplett lista över format som stöds.

Praktiska användningsfall

Åtkomst till VideoFrame-plan öppnar upp ett brett spektrum av möjligheter för avancerad videobearbetning i webbläsaren. Här är några exempel:

1. Realtidseffekter för video

Du kan tillämpa realtidseffekter på video genom att manipulera pixeldatan i VideoFrame. Till exempel kan du implementera ett gråskalefilter genom att ta medelvärdet av R-, G- och B-komponenterna för varje pixel i en RGBA-bild och sedan sätta alla tre komponenterna till det medelvärdet. Du kan också skapa en sepiatoneffekt eller justera ljusstyrka och kontrast.

async function applyGrayscale(videoFrame) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;
  const buffer = new ArrayBuffer(width * height * 4); // RGBA
  const rgba = new Uint8ClampedArray(buffer);

  await videoFrame.copyTo(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height
  });

  for (let i = 0; i < rgba.length; i += 4) {
    const r = rgba[i];
    const g = rgba[i + 1];
    const b = rgba[i + 2];

    const gray = (r + g + b) / 3;

    rgba[i] = gray;       // Röd
    rgba[i + 1] = gray;   // Grön
    rgba[i + 2] = gray;   // Blå
  }

  // Skapa en ny VideoFrame från den modifierade datan.
  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // Frigör den ursprungliga bildrutan
  return newFrame;
}

2. Applikationer inom datorseende

VideoFrame-plan ger direkt åtkomst till den pixeldata som behövs för uppgifter inom datorseende. Du kan använda denna data för att implementera algoritmer för objektdetektering, ansiktsigenkänning, rörelsespårning och mer. Du kan utnyttja WebAssembly för prestandakritiska delar av din kod.

Till exempel kan du konvertera en färg-VideoFrame till gråskala och sedan tillämpa en kantdetekteringsalgoritm (t.ex. Sobel-operator) för att identifiera kanter i bilden. Detta kan användas som ett förbehandlingssteg för objektigenkänning.

3. Videoredigering och komposition

Du kan använda VideoFrame-plan för att implementera videoredigeringsfunktioner som beskärning, skalning, rotation och komposition. Genom att manipulera pixeldatan direkt kan du skapa anpassade övergångar och effekter.

Till exempel kan du beskära en VideoFrame genom att kopiera endast en del av pixeldatan till en ny VideoFrame. Du skulle justera layout-offsets och strides i enlighet med detta.

4. Anpassade codecs och omkodning

Medan WebCodecs ger inbyggt stöd för vanliga codecs som AV1, VP9 och H.264, kan du också använda det för att implementera anpassade codecs eller omkodningspipelines. Du skulle behöva hantera kodnings- och avkodningsprocessen själv, men VideoFrame-plan låter dig komma åt och manipulera den råa pixeldatan. Detta kan vara användbart för nischade videoformat eller specialiserade kodningskrav.

5. Avancerad analys

Genom att komma åt den underliggande pixeldatan kan du utföra djupanalys av videoinnehåll. Detta inkluderar uppgifter som att mäta den genomsnittliga ljusstyrkan i en scen, identifiera dominerande färger eller upptäcka förändringar i sceninnehållet. Detta kan möjliggöra avancerade videoanalysapplikationer för säkerhet, övervakning eller innehållsanalys.

Arbeta med Canvas och WebGL

Även om du kan manipulera pixeldatan direkt i VideoFrame-plan, behöver du ofta rendera resultatet till skärmen. Gränssnittet CanvasImageBitmap utgör en brygga mellan VideoFrame och <canvas>-elementet. Du kan skapa en CanvasImageBitmap från en VideoFrame och sedan rita den på canvas med hjälp av drawImage()-metoden.

async function renderVideoFrameToCanvas(videoFrame, canvas) {
  const bitmap = await createImageBitmap(videoFrame);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  bitmap.close(); // Frigör bitmap-resurser
  videoFrame.close(); // Frigör VideoFrame-resurser
}

För mer avancerad rendering kan du använda WebGL. Du kan ladda upp pixeldatan från VideoFrame-plan till WebGL-texturer och sedan använda shaders för att tillämpa effekter och transformationer. Detta gör att du kan utnyttja GPU:n för högpresterande videobearbetning.

Prestandaöverväganden

Att arbeta med rå pixeldata kan vara beräkningsintensivt, så det är avgörande att överväga prestandaoptimering. Här är några tips:

• Minimera kopior: Undvik onödig kopiering av pixeldata. Försök att utföra operationer på plats när det är möjligt.
• Använd WebAssembly: För prestandakritiska delar av din kod, överväg att använda WebAssembly. WebAssembly kan ge nära-nativ prestanda för beräkningsintensiva uppgifter.
• Optimera minneslayout: Välj rätt pixelformat och minneslayout för din applikation. Överväg att använda packade format (t.ex. RGBA) om du inte behöver komma åt enskilda färgkomponenter ofta.
• Använd OffscreenCanvas: För bakgrundsbearbetning, använd OffscreenCanvas för att undvika att blockera huvudtråden.
• Profilera din kod: Använd webbläsarens utvecklarverktyg för att profilera din kod och identifiera prestandaflaskhalsar.

Webbläsarkompatibilitet

WebCodecs och VideoFrame API:et stöds i de flesta moderna webbläsare, inklusive Chrome, Firefox och Safari. Nivån av stöd kan dock variera beroende på webbläsarversion och operativsystem. Kontrollera de senaste kompatibilitetstabellerna på webbplatser som MDN Web Docs för att säkerställa att de funktioner du använder stöds i dina målwebbläsare. För kompatibilitet över flera webbläsare rekommenderas funktionsdetektering.

Vanliga fallgropar och felsökning

Här är några vanliga fallgropar att undvika när du arbetar med VideoFrame-plan:

• Felaktig layout: Se till att layout-arrayen korrekt beskriver minneslayouten för pixeldatan. Felaktiga offsets eller strides kan leda till korrupta bilder.
• Missmatchade pixelformat: Se till att pixelformatet du specificerar i copyTo-metoden matchar det faktiska formatet för VideoFrame.
• Minnesläckor: Stäng alltid VideoFrame- och CanvasImageBitmap-objekt när du är klar med dem för att frigöra de underliggande resurserna. Att inte göra det kan leda till minnesläckor.
• Asynkrona operationer: Kom ihåg att copyTo är en asynkron operation. Använd await för att säkerställa att kopieringsoperationen slutförs innan du kommer åt pixeldatan.
• Säkerhetsbegränsningar: Var medveten om säkerhetsbegränsningar som kan gälla när du kommer åt pixeldata från videor med cross-origin.

Exempel: YUV till RGB-konvertering

Låt oss överväga ett mer komplext exempel: att konvertera en YUV420 VideoFrame till en RGB VideoFrame. Detta innebär att läsa Y-, U- och V-planen, konvertera dem till RGB-värden och sedan skapa en ny RGB VideoFrame.

Denna konvertering kan implementeras med följande formel:

R = Y + 1.402 * (Cr - 128)
G = Y - 0.34414 * (Cb - 128) - 0.71414 * (Cr - 128)
B = Y + 1.772 * (Cb - 128)

Här är koden:

async function convertYUV420ToRGBA(videoFrame) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;

  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

  const yuvBuffer = new ArrayBuffer(yPlaneSize + 2 * uvPlaneSize);
  const yuvPlanes = new Uint8ClampedArray(yuvBuffer);

  const layout = [
    { offset: 0, stride: width }, // Y-plan
    { offset: yPlaneSize, stride: width / 2 }, // U-plan
    { offset: yPlaneSize + uvPlaneSize, stride: width / 2 } // V-plan
  ];

  await videoFrame.copyTo(yuvPlanes, {
    format: 'I420',
    codedWidth: width,
    codedHeight: height,
    layout: layout
  });

  const rgbaBuffer = new ArrayBuffer(width * height * 4);
  const rgba = new Uint8ClampedArray(rgbaBuffer);

  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const yIndex = y * width + x;
      const uIndex = Math.floor(y / 2) * (width / 2) + Math.floor(x / 2) + yPlaneSize;
      const vIndex = Math.floor(y / 2) * (width / 2) + Math.floor(x / 2) + yPlaneSize + uvPlaneSize;

      const Y = yuvPlanes[yIndex];
      const U = yuvPlanes[uIndex] - 128;
      const V = yuvPlanes[vIndex] - 128;

      let R = Y + 1.402 * V;
      let G = Y - 0.34414 * U - 0.71414 * V;
      let B = Y + 1.772 * U;

      R = Math.max(0, Math.min(255, R));
      G = Math.max(0, Math.min(255, G));
      B = Math.max(0, Math.min(255, B));

      const rgbaIndex = y * width * 4 + x * 4;
      rgba[rgbaIndex] = R;
      rgba[rgbaIndex + 1] = G;
      rgba[rgbaIndex + 2] = B;
      rgba[rgbaIndex + 3] = 255; // Alfa
    }
  }

  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // Frigör den ursprungliga bildrutan
  return newFrame;
}

Detta exempel demonstrerar kraften och komplexiteten i att arbeta med VideoFrame-plan. Det kräver en god förståelse för pixelformat, minneslayout och färgrymdskonverteringar.

Slutsats

VideoFrame-planens API i WebCodecs låser upp en ny nivå av kontroll över videobearbetning i webbläsaren. Genom att förstå hur man kommer åt och manipulerar pixeldata direkt kan du skapa avancerade applikationer för realtidseffekter, datorseende, videoredigering och mer. Även om det kan vara utmanande att arbeta med VideoFrame-plan är de potentiella fördelarna betydande. I takt med att WebCodecs fortsätter att utvecklas kommer det utan tvekan att bli ett viktigt verktyg för webbutvecklare som arbetar med media.

Vi uppmuntrar dig att experimentera med VideoFrame-planens API och utforska dess möjligheter. Genom att förstå de underliggande principerna och tillämpa bästa praxis kan du skapa innovativa och högpresterande videoapplikationer som tänjer på gränserna för vad som är möjligt i webbläsaren.

Vidare läsning

• MDN Web Docs om WebCodecs
• WebCodecs-specifikationen
• WebCodecs exempelkods-arkiv på GitHub.